<template>
	<!-- 优惠信息 -->
	<view class="e-flex e-m-b-20 e-flex-items-start">
		<view class="e-flex-1">
			<view class="activity-box e-font-20 e-m-r-10 e-m-b-10"
				:style="{color: AppSkin.primary, background: activeBackgroundColor}" v-if="activityInfo.limit">
				{{activityInfo.limit}}
			</view>
			<view class="activity-box e-font-20 e-m-r-10 e-m-b-10"
				:style="{color: AppSkin.primary, background: activeBackgroundColor}" v-if="activityInfo.discount">
				{{activityInfo.discount}}
			</view>
			<view class="activity-box e-font-20 e-m-r-10 e-m-b-10"
				:style="{color: AppSkin.primary, background:activeBackgroundColor}" v-if="activityInfo.coupon">
				{{activityInfo.coupon.name}}
			</view>
			<view class="activity-box e-font-20 e-m-r-10 e-m-b-10"
				:style="{color: AppSkin.primary, borderColor: AppSkin.primary}" v-if="activityInfo.flashSale">
				{{activityInfo.flashSale}}
			</view>
			<view class="activity-box e-font-20 e-m-r-10 e-m-b-10"
							:style="{color: AppSkin.primary, background: activeBackgroundColor}" v-if="info.distributionType === 1">
							{{$t('classify.闪送')}}
						</view>
			<view class="activity-box e-font-20 e-m-r-10 e-m-b-10"
							:style="{color: AppSkin.primary, background: activeBackgroundColor}" v-if="info.distributionType === 2">
							{{$t('classify.配送')}}
						</view>
			<!-- #ifdef MP-WEIXIN||MP-ALIPAY -->
			<block class="" v-if="activityInfo.give">
				<view class="activity-box e-font-32 e-m-r-10 e-m-b-10"
					:style="{color: AppSkin.primary, background: activeBackgroundColor}"
					v-for="(item, index) in activityInfo.give" :key="index">
					{{item.name}}
				</view>
			</block>
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN||MP-ALIPAY -->
			<template class="" v-if="activityInfo.give">
				<view class="activity-box e-font-32 e-m-r-10 e-m-b-10"
					:style="{color: AppSkin.primary, background: activeBackgroundColor}"
					v-for="(item, index) in activityInfo.give" :key="index">
					{{item.name}}
				</view>
			</template>
			<!-- #endif -->

		</view>
		<view class="e-m-l-20 e-font-24 e-flex" :style="{color: AppSkin.primary}" @tap="handleClick" v-if="couponList && couponList.length">
			<text>{{$t('classify.领券')}}</text>
			<view class="e-m-l-10 right-arrow" :style="{borderColor: AppSkin.primary}"></view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			info: Object,
			couponList:Array
		},
		data() {
			return {
				activityInfo: {}
			}
		},
		computed: {
			activeBackgroundColor() {
				return this.AppSkin.primary.replace('1)', '0.08)')
			},
		},
		watch: {
			info: {
				handler(newValue) {
					if (newValue.activity) {
						this.activityInfo = JSON.parse(JSON.stringify(newValue.activity))
						if (this.activityInfo.coupon) this.activityInfo.coupon = JSON.parse(this.activityInfo.coupon)
						if (this.activityInfo.give) this.activityInfo.give = JSON.parse(this.activityInfo.give)
					}
				},
				immediate: true
			}
		},
		methods: {
			handleClick() {
				this.$emit('click')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.activity-box {
		padding: 2rpx 10rpx 4rpx;
		display: inline-block;
		border-radius: 6rpx;
	}

	.right-arrow {
		border: 4rpx solid;
		width: 16rpx;
		height: 16rpx;
		border-left: none;
		border-bottom: none;
		transform: rotate(45deg);
	}
</style>
